import React from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import TodoHeader from './TodoHeader'
import TodoItem from './TodoItem'
import TodoFooter from './TodoFooter'
import * as filterType from './filterTypes'

export default class TodoApp extends React.Component{
    constructor(props){
        super(props);
        this.state={
            todos:[],
            filterType:filterType.ALL
        }
    }

    //添加待办事情
    addTodo=(todo)=>{
      let todos=this.state.todos;
      todo=Object.assign(todo,{
          id:Math.random(),
          completed:false
      })
        todos.push(todo);
        this.setState({todos})
    }

    //切换
    toggle=(id)=>{
        let todos=this.state.todos;
        todos=todos.map((todo)=>{
            if(todo.id===id){
                todo.completed=!todo.completed
            }
            return todo
        });
        this.setState({todos})
   }

   //全选
    checkAll=(e)=>{
        let todos=this.state.todos;
          todos=todos.map((todo)=>{
              todo.completed=e.target.checked;
              return todo
          });
          this.setState({todos})
    }


    //删除
    remove=(id)=>{
        let todos=this.state.todos;
        let index=todos.findIndex((todo,index)=>todo.id===id); //找到需要删除的
        todos.splice(index,1);//删除此index
        this.setState({todos})
    }

    //筛选
    select=(type)=>{
        this.setState({
            filterType:type
        })
    }

    //删除选中的
    removeCompleted=()=>{
        let todos=this.state.todos;
        // todos=todos.map((todo,index)=>{
        //     if(todo.completed){
        //         console.log(index)
        //         todos.splice(index--,1)
        //     }
        //    return todo
        // })

        for(var i=0;i<todos.length;i++){
            if(todos[i].completed){
                console.log(i)
                todos.splice(i--,1)
            }
        }
        console.log(todos)


        // todos=todos.filter((todo)=>{
        //         return !todo.completed
        // }); //过滤出未选中的
        this.setState({todos})
    }

    render(){
        let todos=this.state.todos;
        //没有选中的数量  reduce是累加&高阶函数
        let activeCount=todos.reduce((total,todo)=>{
            return total+(todo.completed?0:1)
        },0);

        let completedCount=todos.length-activeCount

        let showTodos=todos.filter((todo)=>{
            switch (this.state.filterType){
                case filterType.ACTIVE:
                    return !todo.completed;
                case filterType.COMPLETED:
                    return todo.completed;
                default:
                    return true;
            }
        });

        let main=(
            <ul className='list-group'>
                {todos.length>0?  <li className='list-group-item' >
                    <input type='checkbox' checked={activeCount>0?false:true}  onChange={this.checkAll}/> 全部选中
                </li>:''}
                {showTodos.map((todo,index)=><TodoItem
                    key={index}
                    todo={todo}
                    toggle={this.toggle}
                    remove={this.remove}
                >
                </TodoItem>)}
            </ul>
        );

        return (
          <div className='row' style={{marginTop:'20px'}}>
              <div className='col-md-6 col-md-offset-3' >
                  <div className='panel panel-default'>
                      <div className='panel-heading'>
                         < TodoHeader addTodo={this.addTodo}/>
                      </div>
                      <div className='panel-body'>
                          {main}
                      </div>
                      <div className='panel-footer'>
                         <TodoFooter
                             activeCount={activeCount}
                             select={this.select}
                             filterType={this.state.filterType}
                             completedCount={completedCount}
                             removeCompleted={this.removeCompleted}
                         />
                      </div>
                  </div>
              </div>
          </div>
        )
      }
}